<!DOCTYPE html>
<html>
    <head>
        <title>{tournamentName} Autonomous Mode</title>
        <link type="text/css" rel="stylesheet" href="templates/css/Autonomous.css"/>
    </head>
    <body>
        <div class="top">
			<div class="match" id="m{allianceColor}">
				 <h2 id="match">{tournamentTitle}</h2>
			</div>
			<div class="title" id="t{allianceColor}">
				 <h2>Autonomous Mode</h2>
			</div>
		</div>
        <div class="main">
            <div class="teams">
                <div class="teamABC" id="team0" >
                    <h1 class="team">{team1}</h1>
                    <div>
                        <div id="0" class="table" onclick="changeImage(0,0)">
                        Robot is in Auto Zone
                    </div>
                        <div id="1" class="table" onclick="changeImage(1,1,undefined,2)">
                        Tote in Auto zone
                    </div>
                        <div class="USSR">
                            <div id="2" class="Russia" onclick="changeImage(2,2,1,undefined,1)">1</div>
                            <div id="3" class="Russia" onclick="changeImage(3,2,1,undefined,2)">2</div>
                            <div id="4" class="Russia" onclick="changeImage(4,2,1,undefined,3)">3</div>
                        </div>
                        <div id="5" class="table" onclick="changeImage(5,3,undefined,4)">
                        Stacked Totes
                    </div>
                        <div class="USSR">
                            <div id="6" class="Russia"></div>
                            <div id="7" class="Russia" onclick="changeImage(7,4, 5,undefined,2)">2</div>
                            <div id="8" class="Russia" onclick="changeImage(8,4, 5,undefined,3)">3</div>
                        </div>
                        <div id="9" class="table" onclick="changeImage(9,5,undefined,6)">
                        Containers in Auto
                    </div>
                        <div class="USSR">
                            <div id="10" class="Russia" onclick="changeImage(10,6,9,undefined,1)">1</div>
                            <div id="11" class="Russia" onclick="changeImage(11,6,9,undefined,2)">2</div>
                            <div id="12" class="Russia" onclick="changeImage(12,6,9,undefined,3)">3</div>
                        </div>
                    </div>
                </div>
                <div class="teamABC" id="team1" >
                    <h1 class="team">{team2}</h1>
                    <div>
                        <div id="13" class="table" onclick="changeImage(13,10)">
                        Robot is in Auto Zone
                    </div>
                        <div id="14" class="table" onclick="changeImage(14,11,undefined,12)">
                        Tote in Auto zone
                    </div>
                        <div class="USSR">
                            <div id="15" class="Russia" onclick="changeImage(15,12,14,undefined,1)">1</div>
                            <div id="16" class="Russia" onclick="changeImage(16,12,14,undefined,2)">2</div>
                            <div id="17" class="Russia" onclick="changeImage(17,12,14,undefined,3)">3</div>
                        </div>
                        <div id="18" class="table" onclick="changeImage(18,13,undefined,14)">
                        Stacked Totes
                    </div>
                        <div class="USSR">
                            <div id="19" class="Russia"></div>
                            <div id="20" class="Russia" onclick="changeImage(20,14,18,undefined,2)">2</div>
                            <div id="21" class="Russia" onclick="changeImage(21,14,18,undefined,3)">3</div>
                        </div>
                        <div id="22" class="table" onclick="changeImage(22,15,undefined,16)">
                        Containers in Auto
                    </div>
                        <div class="USSR">
                            <div id="23" class="Russia" onclick="changeImage(23,16,22,undefined,1)">1</div>
                            <div id="24" class="Russia" onclick="changeImage(24,16,22,undefined,2)">2</div>
                            <div id="25" class="Russia" onclick="changeImage(25,16,22,undefined,3)">3</div>
                        </div>
                    </div>
                </div>
                <div class="teamABC" id="team2" >
                    <h1 class="team">{team3}</h1>
                    <div>
                        <div id="26" class="table" onclick="changeImage(26,17)">
                        Robot is in Auto Zone
                    </div>
                        <div id="27" class="table" onclick="changeImage(27,18,undefined,19)">
                        Tote in Auto zone
                    </div>
                        <div class="USSR">
                            <div id="28" class="Russia" onclick="changeImage(28,19,27,undefined,1)">1</div>
                            <div id="29" class="Russia" onclick="changeImage(29,19,27,undefined,2)">2</div>
                            <div id="30" class="Russia" onclick="changeImage(30,19,27,undefined,3)">3</div>
                        </div>
                        <div id="31" class="table" onclick="changeImage(31,20,undefined,21)">
                        Stacked Totes
                    </div>
                        <div class="USSR">
                            <div id="32" class="Russia"></div>
                            <div id="33" class="Russia" onclick="changeImage(33,21,31,undefined,2)">2</div>
                            <div id="34" class="Russia" onclick="changeImage(34,21,31,undefined,3)">3</div>
                        </div>
                        <div id="35" class="table" onclick="changeImage(35,22,undefined,23)">
                        Containers in Auto
                    </div>
                        <div class="USSR">
                            <div id="36" class="Russia" onclick="changeImage(36,23,35,undefined,1)">1</div>
                            <div id="37" class="Russia" onclick="changeImage(37,23,35,undefined,2)">2</div>
                            <div id="38" class="Russia" onclick="changeImage(38,23,35,undefined,3)">3</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <form id="form" action="autonomous.php" method="POST">
            <input type="submit" id="Next" class="bigButton"  value="Next" name="btnNext"/>
			<div>
				<input name="team1robot" id="input0"/>
				<input name="team1totevalue" id="input2"/>
				<input name="team1stackvalue" id="input4"/>
				<input name="team1containervalue" id="input6"/>
			</div>
			<div>
				<input name="team2robot" id="input10"/>
				<input name="team2totevalue" id="input12"/>
				<input name="team2stackvalue" id="input14"/>
				<input name="team2containervalue" id="input16"/>
			</div>
			<div>
				<input name="team3robot" id="input17"/>
				<input name="team3totevalue" id="input19"/>
				<input name="team3stackvalue" id="input21"/>
				<input name="team3containervalue" id="input23"/>
			</div>
        </form>
		<script type="text/javascript" src="templates/js/Autonomous.js">
		</script>
    </body>
</html>